<style scoped>
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 10px;
  margin: 0 10px;
}
</style>

<template>
  <nut-navbar left-show :title="store.lessonDetail.title" @click-back="handleBack" />
  <nut-swiper :auto-play="0" v-if="store.lessonDetail.thumb !== ''">
    <nut-swiper-item style="height: 150px">
      <img :src="cfg.imageUrl(store.lessonDetail.thumb)" style="height: 100%; width: 100%" />
    </nut-swiper-item>
  </nut-swiper>
  <nut-divider />
  <div>教师: {{ store.lessonDetail.teachers }}</div>
  <nut-divider />
  <section style="margin-bottom: 60px">
    <nut-tabs v-model="currentTab">
      <nut-tab-pane title="课程介绍" pane-key="1">
        <div v-if="store.lessonDetail.content" v-html="store.lessonDetail.content"></div>
      </nut-tab-pane>
      <nut-tab-pane title="课程章节" pane-key="2">
        <nut-cell
          v-if="store.lessonChapters && store.lessonChapters.length > 0"
          v-for="(chapter, index) in store.lessonChapters"
          :key="index"
          :title="chapter.title"
          :desc="durationFormatter(chapter.duration)"
        />
        <div class="notext" v-else>无课程章节</div>
      </nut-tab-pane>
      <nut-tab-pane title="课件资料" pane-key="3">
        <nut-cell
          v-if="store.lessonEbooks && store.lessonEbooks.length > 0"
          v-for="(ebook, index) in store.lessonEbooks"
          :key="index"
          :title="ebook.title"
          :desc="ebook.size"
        />
        <div class="notext" v-else>无课件资料</div>
      </nut-tab-pane>
    </nut-tabs>
  </section>
  <section class="bottom-bar">
    <nut-row>
      <nut-col :span="12">
        <nut-price :price="store.lessonDetail.price" size="large" /> &nbsp;
        <nut-price :price="store.lessonDetail.marketPrice" size="small" strike-through />
      </nut-col>
      <nut-col :span="12" style="text-align: right">
        <nut-button type="primary" v-if="store.lessonDetail.isBuyed" @click="handleStudy"
          >开始学习</nut-button
        >
        <nut-button type="primary" v-else @click="handleBuy">购买课程</nut-button>
      </nut-col>
    </nut-row>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLessonStore } from '@/stores/lesson'
import cfg from '@/config/config'
import { durationFormatter } from '@/util/utils'

const store = useLessonStore()
const route = useRoute()
const router = useRouter()
const currentTab = ref<number>(1)

onMounted(async () => {
  if (route.params.id && route.params.id > 0) {
    await store.loadDetail(parseInt(route.params.id as string))
    store.getChapters(store.lessonDetail.id)
    store.getEbooks(store.lessonDetail.id)
  } else {
    router.back()
  }
})

const handleStudy = () => {
  router.push({ name: 'my_lesson_detail', params: { id: store.lessonDetail.id } })
}

const handleBuy = () => {
  router.push({ name: 'lesson_buy', params: { id: store.lessonDetail.id } })
}

const handleBack = () => {
  router.back()
}
</script>
